<script setup lang="ts">
import Choose from "/@/views/home/model/choose.vue";
import {Picture as IconPicture} from '@element-plus/icons-vue'

const base64 = ref<String>("")
const result_base64 = ref<String>("")
const srcList = ref<string[]>([""])
import {base64ConvertFile} from "/@/utils/convert";

const updateResult = (base: string) => {
    console.log("上传了结果" + base)
    const file: File = base64ConvertFile(base, "1.jpg")
    const url = URL.createObjectURL(file)
    srcList.value = []
    srcList.value.push(url)
    console.log(srcList.value)
    srcList1 = [url]
    console.log(srcList1)
    result_base64.value = url
}

const srcbase64List = ref<Array<String>>([
    ""
])
const updateBase64 = async (base: File) => {
    if (base !== undefined) {
        base64.value = URL.createObjectURL(base);
    }
    console.log("传递过来的文件数据是File" + base)
}

const show = ref<Boolean>(false)

const onPreview = () => {
    show.value = true
}

const closeViewer = () => {
    show.value = false
}

let srcList1 = []
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
//     'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
//     'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
//     'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
//     'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
//     'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
//     'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
// ]

</script>

<template>
    <div class="model">
        <div class="model-container">
            <el-row :gutter="10">
                <el-col :span="10">
                    <choose @updateResult="updateResult" @updateBase64="updateBase64"></choose>
                </el-col>
                <el-col :span="14">
                    <div class="demo-image__error">
                        <div class="block left">
                            <span class="demonstration">原始图</span>

                            <el-image
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2"
                                    style="width: 400px; height: 250px"
                                    fit="cover"
                                    :src="base64"/>

                        </div>

                        <div class="block right">
                            <span class="demonstration">结果图</span>
                            <div class="demo-image__preview">
                                <el-image
                                        @click="onPreview"
                                        :initial-index="0"
                                        :zoom-rate="1.2"
                                        :max-scale="7"
                                        :min-scale="0.2"
                                        style="width: 400px; height: 250px"
                                        lazy
                                        :preview-src-list="srcList"
                                        :src="result_base64">
                                    <template #error>
                                        <div class="image-slot">
                                            <el-icon>
                                                <icon-picture/>
                                            </el-icon>
                                        </div>
                                    </template>
                                </el-image>
                            </div>

                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<style scoped lang="scss">
.model {
  background-color: #ecedf5;
  height: 100%;
  padding-top: 20px;

  .model-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    height: 100%;

    .demo-image__error {
      display: flex;
      justify-content: center;
      flex-direction: column;
      background-color: #fff;
      height: 100%;
      width: 100%;

      .left {

        padding: 10px 0;
        text-align: center;
        border-bottom: solid 1px var(--el-border-color);
        display: inline-block;
        box-sizing: border-box;
        vertical-align: top;
      }

      .right {
        padding: 10px 0;
        text-align: center;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: top;
      }

    }

    .demo-image__error .demonstration {
      display: block;
      color: var(--el-text-color-secondary);
      font-size: 14px;
      margin-bottom: 20px;
    }

    .demo-image__error .el-image {
      padding: 0 5px;
      max-width: 400px;
      max-height: 300px;
      width: 100%;
      height: 300px;
    }

    .demo-image__error .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: var(--el-fill-color-light);
      color: var(--el-text-color-secondary);
      font-size: 30px;
    }

    .demo-image__error .image-slot .el-icon {
      font-size: 30px;
    }

  }
}


</style>